<template>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="row justify-content-center mb-3">
                <b-carousel
                    id="carousel-fade"
                    style="text-shadow: 0px 0px 2px #000"
                    fade
                    indicators
                    background="#ababab"
                    >
                    <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.GLOBAL.BASE_URL + this.msg.photos[0]" />
                    </b-carousel-slide>
                    <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.GLOBAL.BASE_URL + this.msg.photos[1]" />
                    </b-carousel-slide>
                    <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.GLOBAL.BASE_URL + this.msg.photos[2]" />
                    </b-carousel-slide>
                </b-carousel>
            </div>
            <div class="row justify-content-center mb-3">
                <strong style="text-align:right"><i class="fa fa-building"></i>房源名称：</strong>
                <strong style="text-align:left">{{msg.title}}</strong>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <div class="h6 font-weight-300 text-align:left">
                        <i v-if="msg.roomStatus === 'enable'" class="fa fa-info-circle location_pin mr-2">状态：可租</i>
                        <i v-else-if="msg.roomStatus === 'applied'" class="fa fa-info-circle location_pin mr-2">状态：审核中</i>
                        <i v-else-if="msg.roomStatus === 'leased'" class="fa fa-info-circle location_pin mr-2">状态：已租出</i>
                        <i v-else class="fa fa-info-circle location_pin mr-2">状态：停租</i>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center"><i class="ni ni-pin-3 mr-1"></i>位置：{{msg.address}} </h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center"><i class="ni ni-building mr-1"></i>户型：{{msg.layout}} </h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center"><i class="fa fa-circle mr-1"></i>面积：{{msg.area}} </h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 style="text-align:center"><i class="fa fa-building mr-1"></i>楼层：{{msg.floor}} </h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="contentDiv">
                    <h6 v-if="msg.rentType === '长租'" style="text-align:center"><i class="fa fa-money mr-1"></i>价格： {{msg.rental}}元/月</h6>
                    <h6 v-else style="text-align:center"><i class="fa fa-money mr-1"></i>价格： {{hrental}}元/日</h6>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <base-button v-if="msg.roomStatus === 'enable' || msg.roomStatus === 'applied' || msg.roomStatus === 'leased'" type="primary" @click="stopRent">暂停租出</base-button>
                <base-button v-else type="primary" @click="enableRent">恢复租出</base-button>
            </div>
            <div class="row justify-content-center">
                <base-alert v-if="showStop" type="danger">暂停成功！即将刷新</base-alert>
                <base-alert v-if="showEnable" type="success">恢复成功！即将刷新</base-alert>
                <base-alert v-if="showFail" type="warning">失败！</base-alert>
            </div>
            <hr>
        </div>
    </div>
    <!-- <hr> -->
</template>

<script>
import {changeState} from "../../api";
export default {
    props: {
        msg:{
            title: String,
            layout: String,
            address: String,
            tags: Object,
        }
    },
    data () {
        return{
            showStop:false,
            showEnable:false,
            showFail:false
        }
    },
    methods: {
        stopRent(){
            let formData = new FormData();
            formData.append('hid', this.msg.id);
            formData.append('tos', "stop");
            changeState(formData).then(res=>{
                if (res.code === "1") {
                    this.showStop = true;
                    this.showFail = false;
                    this.showEnable = false;
                    this.flush();
                    
                } else {
                    this.showStop = false;
                    this.showFail = true;
                    this.showEnable = false;
                    this.flush();
                }
            });
        },
        flush(){
            this.$router.go(0);
        },
        enableRent(){
            let formData = new FormData();
            formData.append('hid', this.msg.id);
            formData.append('tos', "enable");
            changeState(formData).then(res=>{
                if (res.code === "1") {
                    this.showEnable = true;
                    this.showFail = false;
                    this.showStop = false;
                    this.flush();
                } else {
                    this.showEnable = false;
                    this.showFail = true;
                    this.showStop = false;
                    this.flush();
                }
            });
        },
    },
    computed:{
        hid(){
            return this.msg.id;
        },
        hsize(){
            return this.msg.area;
        },
        hfloor(){
            return this.msg.floor;
        },
        rentType(){
            if (this.msg.rentalmethod === 'shortr')
            {
                return '短租'
            } else {
                return '长租'
            }
        },
        hrental(){
            return this.msg.price;
        },
        housePic(){
            if (this.msg.photos){
                return this.GLOBAL.BASE_URL + this.msg.photos[0]
            } else {
                return "img/房屋1.jpeg";
            }
        }
    },
    created() {
    }
}
</script>